<script setup lang="tsx">
import { ref } from "vue";
import "vue-json-pretty/lib/styles.css";
import VueJsonPretty from "vue-json-pretty";

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});

function parseJSON(str) {
    if (typeof str !== 'string') return str;

    try {
        // 如果已经是合法 JSON，直接解析
        return JSON.parse(str);
    } catch (e) {
        try {
            // 否则尝试先解一层转义
            const unescaped = JSON.parse(str);
            return typeof unescaped === 'string' ? JSON.parse(unescaped) : unescaped;
        } catch (innerError) {
            console.error('JSON 解析失败:', innerError);
            return null;
        }
    }
}

const columns = [
  {
    label: "IP 地址",
    prop: "ClientIP",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.ClientIP;
    }
  },
  {
    label: "地点",
    prop: "Address",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.Address;
    }
  },
  {
    label: "操作系统",
    prop: "OS",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.OS;
    }
  },
  {
    label: "浏览器类型",
    prop: "Browser",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.Browser;
    }
  },
  {
    label: "所属模块",
    prop: "Module",
    cellRenderer: () => {
      const data = props.data as any;
    if (!data || data.length === 0) return "-";

    const module = data[0]?.Properties?.Module;
    const operation = data[0]?.Properties?.Operation;

    if (!module && !operation) return "-";
    if (!module) return operation;
    if (!operation) return module;

    return `${module}-${operation}`;
    }
  },
  {
    label: "请求时间",
    prop: "TimeStamp",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.TimeStamp;
    }
  },
  {
    label: "请求方法",
    prop: "HttpMethod",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.HttpMethod;
    }
  },
  {
    label: "请求耗时",
    prop: "ElapsedMilliseconds",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.ElapsedMilliseconds;
    }
  },
  {
    label: "请求接口",
    prop: "RequestPath",
    cellRenderer: () => {
      return (props.data[0] as any).Properties.RequestPath;
    },
    copy: true
  },
  {
    label: "TraceId",
    prop: "TraceId",
    copy: true
  }
];

const dataList = ref([
  {
    title: "响应头",
    name: "responseHeaders",
    data: parseJSON((props.data[0] as any).Properties.ResponseHeaders)
  },
  {
    title: "响应体",
    name: "responseBody",
    data: parseJSON(parseJSON((props.data[0] as any).Properties.ResponseBody))
  },
  {
    title: "请求头",
    name: "requestHeaders",
    data: parseJSON((props.data[0] as any).Properties.RequestHeaders)
  },
  {
    title: "请求体",
    name: "requestBody",
    data: parseJSON((props.data[0] as any).Properties.RequestBody)
  },
  {
    title: "GET请求参数",
    name: "requestQueryParams",
    data: parseJSON((props.data[0] as any).Properties.RequestQueryParams)
  }
]);
</script>

<template>
  <div>
    <el-scrollbar>
      <PureDescriptions border :data="data" :columns="columns" :column="5" />
    </el-scrollbar>
    <el-tabs :modelValue="'responseBody'" type="border-card" class="mt-4">
      <el-tab-pane
        v-for="(item, index) in dataList"
        :key="index"
        :name="item.name"
        :label="item.title"
      >
        <el-scrollbar max-height="calc(100vh - 240px)">
          <vue-json-pretty v-model:data="item.data" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
